<template>
	<view class="app">
		<view class="panel">
			<view class="query">	
				<view class='date'>
					<input v-model="filter.username" placeholder="用户名"/>
				</view>
				<view class='date'>
					<input v-model="filter.mobile" placeholder="手机号"/>
				</view>
				<view class="btn" style="margin-right: 10px;" @click.stop="loaddata({current: 1})">查询</view>
				<view class="btn" @click.stop="addManager('popup')">新增</view>
			</view>
		</view>
		
		<!-- 表格 -->
		<view class="panel" style="overflow-x: auto; padding-bottom: 60px;">
			<view class="table">
				<view class="row header">
					<view class="cell" @click="changesort('id')">ID</view>
					<view class="cell">用户名</view>
					<view class="cell">所辖城市</view>
					<view class="cell">操作</view>
				</view>
				<view class="row body" v-for="(item,index) in list" :key="index">
					<view @click="getQrcode(item.id)" :class="'cell status2_'+item.is_freeze">{{item.id}}</view>
					<view class="cell status2_">
						{{item.username}}
					</view>
					<view class="cell status2_">
						<view class="uni-select">
							<view class="uni-select__input-box">
								<view class="uni-select__input-text uni-select__input-placeholder" @click="item.show = !item.show">
									{{item.show?'隐藏':'查看'}}
								</view>
							</view>
							<view v-show="item.show" class="uni-select__selector">
								<view class="uni-popper__arrow"></view>
								<view class="uni-select__selector-scroll">
									<view class="uni-scroll-view">
										<view class="uni-scroll-view" style="overflow: hidden auto;">
											<view class="uni-scroll-view-content">
												<view class="item" v-for="(city,index) in item.cityid" :key="index" @click="selectCity(item)">
													<text class="uni-select__selector-item">{{city.desc}}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="edit cell" @click="viewedit('popup',item)">
						修改
					</view>
				</view>
				<!-- <view>
					
				</view> -->
			</view>	
			<view class="page">
				<view class="page-item">
					<wyb-pagination :total-items="channel.total" :page-items="channel.per_page" :current="channel.current_page" :show-total-item="true" :show-icon="true" @change="loaddata"/>
				</view>
			</view>
		</view>
		
		<!-- 弹框 -->
		<uni-popup ref="popup" type="bottom" :animation="true" :maskClick="true" @maskClick="maskClick">
			<view class="popup">
				<view class="title">
					新增管理员账号
				</view>
				<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top">
					<!-- <uni-forms-item label="账号" name="realname" required>
						<uni-easyinput trim="all" v-model="formData.realname" placeholder="请输入账号" />
					</uni-forms-item> -->
					<uni-forms-item label="用户名" name="username" required>
						<uni-easyinput trim="all" v-model="formData.username" placeholder="请输入用户名" />
					</uni-forms-item>
					<uni-forms-item label="密码" name="password" required>
						<uni-easyinput trim="all" v-model="formData.password" :passwordIcon="false" type="password" placeholder="请输入密码" />
					</uni-forms-item>
					<uni-forms-item label="确认密码" name="secondPassword" required>
						<uni-easyinput trim="all" v-model="formData.secondPassword" :passwordIcon="false" type="password" placeholder="请确认密码" />
					</uni-forms-item>
					<uni-forms-item label="联系电话" name="mobile" required>
						<uni-easyinput trim="all" v-model="formData.mobile" placeholder="请输入联系电话" />
					</uni-forms-item>
					<uni-forms-item label="所辖城市" name="cityid" required>
						<view class="input-value input-value-border" @click="focusHandle('popupCity')">
							<text class="selected-area placeholder">
								<text v-if="!cityName" >请选择城市</text>
								<text v-else class="city-name">{{cityName}}</text>
							</text>
							<view style="margin-right: 5px;">
								<uni-icons type="down" color="#999" size="15"></uni-icons>
							</view>
						</view>
						<uni-popup ref="popupCity" background-color="rgba(0,0,0,0)" type="bottom">
							<view class="popup-content" style="height: 500px;border-radius:15px">
								<view class="dialog-caption">
									<view class="title-area">
										<text class="dialog-title">请选择城市</text>
									</view>
									<view class="dialog-close" @click="closeCity('popupCity')">
										<uni-icons type="closeempty" color="#666" size="20"></uni-icons>
									</view>
								</view>
								<view class="uni-data-pickerview picker-view">
									<view class="selected-list">
										<view class="selected-item selected-item-active">
											<text >请选择</text>
										</view>
									</view>
									<view class="tab-c">
										<view class="list">
											<scroll-view scroll-y style="height: 100%;width: 100%;">
												<view class="item" v-for="item in cities" :key="item.site_id" @click="selectCity(item)">
													<text class="item-text">{{item.desc}}</text>
													<uni-icons v-if="item.checked" type="checkmarkempty" color="#007aff" size="18"></uni-icons>
												</view>
											</scroll-view>
										</view>
									</view>
								</view>
							</view>
						</uni-popup>
						
					</uni-forms-item>
					<view class="flex justify-center items-center btn-save">
						<button @tap.stop="save" size="mini">{{isNew?'提交':'更新'}}</button>
					</view>
				</uni-forms>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				channel: {
					total: 0,
					per_page: 15,
					current_page: 1
				},
				filter: {
					username: '',
					mobile: ''
				},
				range: [
				    { value: 0, text: "篮球" },
				    { value: 1, text: "足球" },
				    { value: 2, text: "游泳" },
					{ value: 3, text: "篮球" },
					{ value: 4, text: "足球" },
					{ value: 5, text: "游泳" },
					{ value: 6, text: "篮球" },
					{ value: 7, text: "足球" },
					{ value: 8, text: "游泳" },
				],
				list: [],
				cities: [],
				citiesMap: new Map,
				isNew: true, // 是否更新
				oldPassword: '', // 老密码
				formData: {
					username: '',
					password: '',
					secondPassword: '', // 二次确认
					cityid: [],
					realname: 0,
					mobile: '',
					ischangepass: '' // 是否修改密码 add 1 edit 0
				},
				rules: {
					// 对name字段进行必填验证
					// realname: {
					// 	rules: [{
					// 			required: true,
					// 			errorMessage: '请输入用户名',
					// 		},
					// 	]
					// },
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入账号',
							},
							{
								pattern: '^[^\u4e00-\u9fff]+$',
								errorMessage: '账号不能是中文',
							},
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								pattern: '^[^\u4e00-\u9fff]+$',
								errorMessage: '密码不能是中文',
							},
						]
					},
					secondPassword: {
						rules: [{
								required: true,
								errorMessage: '请确认密码',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if(!/^[^\u4e00-\u9fff]+$/.test(value)){
										callback('密码不能是中文')
									}else if(value !== data.password){
										callback('两次密码输入不一致')
									}
								}
							},
						]
					},
					mobile: {
						rules: [{
								required: true,
								errorMessage: '请输入联系电话',
							},
							{
								pattern: '^[1][3,4,5,6,7,8,9][0-9]{9}$',
								errorMessage: '请输入正确的11位电话',
							},
						]
					},
					cityid: {
						rules: [{
								required: true,
								errorMessage: '请选择城市',
							},
						]
					},
				}
			}
		},
		computed: {
			cityName(){
				const city =  this.cities.filter(item => item.checked).map(item=> item.desc)
				return city.toString()
			}
		},
		onLoad() {
			this.comm.http('/api/tool/loadcity').then(res=>{
				this.cities = res.data.map(item=>{
					item.checked = false
					this.citiesMap.set(item.site_id, item)
					return item
				})
				this.loaddata({current: this.channel.current_page})
			});
		},
		methods:{
			maskClick(){
				this.cities.forEach(item=>{
					item.checked = false
				})
				this.formData = {
					username: '',
					password: '',
					secondPassword: '',
					cityid: [],
					realname: 0,
					mobile: '',
					ischangepass: ''
				}
				this.isNew = true
				console.log(this.list);
			},
			selectCity(val){
				if(val.checked){
					val.checked = false
					this.formData.cityid = this.formData.cityid.filter(item=> item.checked)
				}else{
					this.formData.cityid.push(val.site_id)
					val.checked = true
				}
			},
			focusHandle(e){
				this.$refs[e].open();
			},
			closeCity(e){
				this.$refs[e].close();
			},
			loaddata(val){
				this.channel.current_page = val.current
				const params = {
					limit: this.channel.per_page,
					page: this.channel.current_page,
				}
				if(this.filter.username){
					params.filter = JSON.stringify({username: this.filter.username})
				}else if(this.filter.mobile){
					params.filter = JSON.stringify({mobile: this.filter.mobile})
				}else if(this.filter.username && this.filter.mobile){
					params.filter = JSON.stringify(this.filter)
				}else{
					params.filter = '[]'
				}
				this.comm.http('/api/tool/master_list',params , 'POST').then(res=>{
					this.list = res.data.data.map(item=>{
						item.show = false
						item.cityid = item.cityid.split(',').map(id=> this.citiesMap.get(Number(id)))
						return item
					})
					this.channel.total = res.data.total
				});
			},
			addManager(e){
				this.$refs[e].open();
			},
			viewedit(e, item){
				this.isNew = false
				this.oldPassword = item.password
				this.$refs[e].open();
				const cityids = item.cityid.map(item=> item.site_id)
				this.cities = this.cities.map(city=> {
					if(cityids.includes(city.site_id)){
						city.checked = true
					}
					return city
				})
				this.formData = {
					id: item.id,
					username: item.username,
					password: item.password,
					cityid: cityids,
					secondPassword: item.password,
					realname: item.realname,
					mobile: item.mobile,
				}
			},
			save(){
				this.$refs.form.validate().then(res=>{
					if(this.isNew){
						res.ischangepass = 1
					}else if(!this.isNew && res.password !== this.oldPassword){
						res.ischangepass = 0
					}else{
						res.ischangepass = 1
					}
					if(this.formData.id){ res.id = this.formData.id }
					res.cityid = this.cities.filter(item=> item.checked).map(item=> item.site_id).join(',')
					// console.log('表单数据信息：', res, this.formData);
					this.comm.http('/api/tool/master_edit', res,'POST').then(res=>{
						if(res.code === 400){
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000
							});
						}else if(res.code === 1){
							setTimeout(() => { // setTimeout处理了showToast和showLoading冲突的问题
							    uni.showToast({
									title: "操作成功！",
									icon: "none",
									duration: 3000
								});
							}, 0);
							this.$refs.popup.close();
							this.loaddata({current: this.channel.current_page})
							this.maskClick()
						}
					});
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../styles/manager.scss";
</style>